/*
* © 2010 Autodata Solutions Company. All Rights Reserved
* This source code is the confidential and proprietary information of Autodata Solutions Company.
* The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
* without the prior written consent of Autodata Solutions Company.
*/
Ext.ns('net.autodata.modelwalk');
(function () {
	
	/**
	 * @class VehicleSelectorPanel
	 * @extends Ext.BoxComponent
	 * @namespace net.autodata.modelwalk
	 */
	var Panel = Ext.extend(Ext.BoxComponent, {
		
		autoEl: {
			tag: 'div',
			cls: 'vehicleselector-panel'
		},
		
		modelWalk: undefined,
		continueButton: undefined,
		
		iofImage: undefined,
		
		width: 788,
		height: 308,
		
		view: undefined,
		viewCfg: undefined,
		
		iofCfg: {
			imageWidth: 294,
			imageHeight: 127
		},
		
		constructor: function ()
		{
			this.addEvents({
				'trimselected': true
			});
			
			Panel.superclass.constructor.apply(this, arguments);
		},
		
		initComponent: function ()
		{
			Panel.superclass.initComponent.apply(this, arguments);
			
			var view = this.getView();
			view.init(this);
			
			this.modelWalk = new net.autodata.modelwalk.ModelWalkPanel({
				plugins: new net.autodata.modelwalk.plugins.ModelYearLoader(),
				view: new net.autodata.modelwalk.VehicleSelectorModelWalkView()
			});
			this.modelWalk.trim.on('select', this.onTrimSelected, this);
			this.modelWalk.trim.on('change', this.onTrimChanged, this);
			
			this.continueButton = new Ext.Button({
			    text: ASC.message('net.autodata.compare.vehiclepanel.label.continue'),
				handler: this.onContinueClick,
				scope: this,
				width: 92
			});
			
			this.iofImage = new net.autodata.IOFImage(Ext.apply({
				hideMode: 'display'
			}, this.iofCfg));
		},
		
		getView: function ()
		{
			if (!this.view) {
				this.view = new net.autodata.modelwalk.VehicleSelectorView(this.viewCfg);
			}
			return this.view;
		},
		
		/**
		 * @private
		 */
		onRender: function ()
		{
			Panel.superclass.onRender.apply(this, arguments);
			var view = this.getView();
			view.render();
		},
		
		onTrimChanged: function (combo, newValue)
		{	
			if (Ext.isEmpty(newValue)) {
				this.onTrimSelected(combo, undefined);
				return;
			}
			
			var record = combo.getStore().getById(newValue);
			this.onTrimSelected(combo, record);
		},
		
		onTrimSelected: function (combo, record)
		{
			var imageName = record ? record.get('imageName') || this.iofImage.getErrorImageName() : '';
			var show = true;
			
			if (Ext.isEmpty(imageName)) {
				imageName = Ext.BLANK_IMAGE_URL;
				show = false;
			}
			
			if(this.iofImage.getImageName() !== imageName) {
				this.iofImage.setImageName(imageName);
			}
			
			this.iofImage[show ? 'show' : 'hide']();
			
		},
		
		onContinueClick: function ()
		{
			var acode = this.modelWalk.trim.getValue();
			if (Ext.isEmpty(acode)) {
				return;
			}
			
			this.fireEvent('trimselected', acode);
		},
		
		onDestroy: function ()
		{
			this.modelWalk.trim.un('selected', this.onTrimSelected, this);
			Panel.superclass.onDestroy.apply(this, arguments);
		}
		
	});
	
	net.autodata.modelwalk.VehicleSelectorPanel = Panel;
	
})();
